<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IP分析 - 舆情分析系统</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <style>
        .container {
            padding: 20px;
            background: #f5f5f5;
            min-height: 100vh;
        }
        
        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin: 0;
        }
        
        .filter-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .chart-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .chart-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
        }
        
        .chart-wrapper {
            height: 400px;
        }
        
        .stats-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .stat-number {
            font-size: 28px;
            font-weight: bold;
            color: #1890ff;
            margin-bottom: 10px;
        }
        
        .stat-label {
            color: #666;
            font-size: 14px;
        }
        
        .map-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .map-wrapper {
            height: 500px;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
        }
        
        .loading {
            text-align: center;
            padding: 50px;
            color: #999;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">IP分析</h1>
        </div>

        <!-- 筛选条件 -->
        <div class="filter-section">
            <form class="layui-form" lay-filter="filterForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">统计日期</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="dateRange" placeholder="请选择日期范围">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">地区</label>
                        <div class="layui-input-inline">
                            <select name="region" lay-filter="region">
                                <option value="">全部地区</option>
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="广东">广东</option>
                                <option value="浙江">浙江</option>
                                <option value="江苏">江苏</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">IP类型</label>
                        <div class="layui-input-inline">
                            <select name="ipType" lay-filter="ipType">
                                <option value="">全部类型</option>
                                <option value="mobile">移动IP</option>
                                <option value="fixed">固定IP</option>
                                <option value="proxy">代理IP</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" @click="searchData">查询</button>
                        <button type="button" class="layui-btn layui-btn-primary" @click="resetFilter">重置</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 统计卡片 -->
        <div class="stats-cards">
            <div class="stat-card">
                <div class="stat-number">{{ stats.totalIPs }}</div>
                <div class="stat-label">总IP数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ stats.uniqueIPs }}</div>
                <div class="stat-label">独立IP数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ stats.topRegion }}</div>
                <div class="stat-label">活跃地区</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ stats.avgActivity }}</div>
                <div class="stat-label">平均活跃度</div>
            </div>
        </div>

        <!-- IP地理分布图 -->
        <div class="map-container">
            <h3 class="chart-title">IP地理分布</h3>
            <div id="ipMap" class="map-wrapper"></div>
        </div>

        <!-- IP活跃度分布 -->
        <div class="chart-container">
            <h3 class="chart-title">IP活跃度分布</h3>
            <div id="activityChart" class="chart-wrapper"></div>
        </div>

        <!-- 地区IP统计 -->
        <div class="chart-container">
            <h3 class="chart-title">地区IP统计</h3>
            <div id="regionChart" class="chart-wrapper"></div>
        </div>

        <!-- IP类型分布 -->
        <div class="chart-container">
            <h3 class="chart-title">IP类型分布</h3>
            <div id="typeChart" class="chart-wrapper"></div>
        </div>

        <!-- IP访问趋势 -->
        <div class="chart-container">
            <h3 class="chart-title">IP访问趋势</h3>
            <div id="trendChart" class="chart-wrapper"></div>
        </div>
    </div>

    <!-- 引入依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="../../lib/echarts/echarts.min.js"></script>
    <script src="../../lib/layui/layui.js"></script>
    <script src="../../js/api.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                stats: {
                    totalIPs: 0,
                    uniqueIPs: 0,
                    topRegion: '',
                    avgActivity: 0
                },
                ipMap: null,
                activityChart: null,
                regionChart: null,
                typeChart: null,
                trendChart: null,
                filterParams: {
                    startDate: '',
                    endDate: '',
                    region: '',
                    ipType: ''
                },
                loading: false
            },
            mounted() {
                this.initLayui();
                this.initCharts();
                this.loadData();
            },
            methods: {
                // 初始化Layui
                initLayui() {
                    layui.use(['form', 'laydate'], () => {
                        const form = layui.form;
                        const laydate = layui.laydate;
                        
                        // 初始化日期选择器
                        laydate.render({
                            elem: '#dateRange',
                            type: 'date',
                            range: true,
                            done: (value) => {
                                if (value) {
                                    const dates = value.split(' - ');
                                    this.filterParams.startDate = dates[0];
                                    this.filterParams.endDate = dates[1];
                                }
                            }
                        });
                        
                        form.render();
                    });
                },

                // 初始化图表
                initCharts() {
                    this.ipMap = echarts.init(document.getElementById('ipMap'));
                    this.activityChart = echarts.init(document.getElementById('activityChart'));
                    this.regionChart = echarts.init(document.getElementById('regionChart'));
                    this.typeChart = echarts.init(document.getElementById('typeChart'));
                    this.trendChart = echarts.init(document.getElementById('trendChart'));
                },

                // 加载数据
                async loadData() {
                    try {
                        this.loading = true;
                        
                        // 加载统计数据
                        await this.loadStats();
                        
                        // 加载图表数据
                        await this.loadChartData();
                        
                    } catch (error) {
                        console.error('加载数据失败:', error);
                        layui.use('layer', () => {
                            layui.layer.msg('加载数据失败', {icon: 2});
                        });
                    } finally {
                        this.loading = false;
                    }
                },

                // 加载统计数据
                async loadStats() {
                    try {
                        const response = await API.opinion.getIPStats(this.filterParams);
                        this.stats = response;
                    } catch (error) {
                        console.error('加载统计数据失败:', error);
                        // 使用模拟数据
                        this.stats = {
                            totalIPs: 12500,
                            uniqueIPs: 8500,
                            topRegion: '北京',
                            avgActivity: 85
                        };
                    }
                },

                // 加载图表数据
                async loadChartData() {
                    try {
                        const response = await API.opinion.getIPCharts(this.filterParams);
                        this.updateCharts(response);
                    } catch (error) {
                        console.error('加载图表数据失败:', error);
                        // 使用模拟数据
                        this.updateCharts(this.getMockChartData());
                    }
                },

                // 更新图表
                updateCharts(data) {
                    this.updateIPMap(data);
                    this.updateActivityChart(data);
                    this.updateRegionChart(data);
                    this.updateTypeChart(data);
                    this.updateTrendChart(data);
                },

                // 更新IP地图
                updateIPMap(data) {
                    const option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}: {c} (IP数量)'
                        },
                        visualMap: {
                            min: 0,
                            max: 1000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            calculable: true,
                            inRange: {
                                color: ['#e0f3f8', '#045fb4']
                            }
                        },
                        series: [
                            {
                                name: 'IP分布',
                                type: 'map',
                                map: 'china',
                                roam: true,
                                emphasis: {
                                    label: {
                                        show: true
                                    }
                                },
                                data: data.mapData || [
                                    {name: '北京', value: 850},
                                    {name: '上海', value: 720},
                                    {name: '广东', value: 680},
                                    {name: '浙江', value: 520},
                                    {name: '江苏', value: 480},
                                    {name: '四川', value: 350},
                                    {name: '湖北', value: 320},
                                    {name: '山东', value: 300},
                                    {name: '河南', value: 280},
                                    {name: '福建', value: 250}
                                ]
                            }
                        ]
                    };
                    this.ipMap.setOption(option);
                },

                // 更新活跃度分布图表
                updateActivityChart(data) {
                    const activityRanges = ['0-10', '11-50', '51-100', '101-200', '200+'];
                    const counts = data.activityDistribution || [1200, 1800, 1500, 800, 400];
                    
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: activityRanges
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: 'IP数量',
                                type: 'bar',
                                data: counts
                            }
                        ]
                    };
                    this.activityChart.setOption(option);
                },

                // 更新地区统计图表
                updateRegionChart(data) {
                    const regions = data.regionData?.regions || ['北京', '上海', '广东', '浙江', '江苏', '四川', '湖北', '山东', '河南', '福建'];
                    const counts = data.regionData?.counts || [850, 720, 680, 520, 480, 350, 320, 300, 280, 250];
                    
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: regions,
                            axisLabel: {
                                rotate: 45
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: 'IP数量',
                                type: 'bar',
                                data: counts
                            }
                        ]
                    };
                    this.regionChart.setOption(option);
                },

                // 更新IP类型分布图表
                updateTypeChart(data) {
                    const types = data.typeDistribution?.types || ['移动IP', '固定IP', '代理IP'];
                    const counts = data.typeDistribution?.counts || [6500, 4500, 1500];
                    
                    const option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'IP类型',
                                type: 'pie',
                                radius: '50%',
                                data: types.map((type, index) => ({
                                    value: counts[index],
                                    name: type
                                })),
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    this.typeChart.setOption(option);
                },

                // 更新访问趋势图表
                updateTrendChart(data) {
                    const dates = data.trendData?.dates || ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'];
                    const totalIPs = data.trendData?.totalIPs || [1200, 1320, 1010, 1340, 900, 2300, 2100];
                    const uniqueIPs = data.trendData?.uniqueIPs || [800, 850, 720, 900, 650, 1500, 1400];
                    
                    const option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['总IP数', '独立IP数']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: dates
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '总IP数',
                                type: 'line',
                                data: totalIPs
                            },
                            {
                                name: '独立IP数',
                                type: 'line',
                                data: uniqueIPs
                            }
                        ]
                    };
                    this.trendChart.setOption(option);
                },

                // 获取模拟图表数据
                getMockChartData() {
                    return {
                        mapData: [
                            {name: '北京', value: 850},
                            {name: '上海', value: 720},
                            {name: '广东', value: 680},
                            {name: '浙江', value: 520},
                            {name: '江苏', value: 480},
                            {name: '四川', value: 350},
                            {name: '湖北', value: 320},
                            {name: '山东', value: 300},
                            {name: '河南', value: 280},
                            {name: '福建', value: 250}
                        ],
                        activityDistribution: [1200, 1800, 1500, 800, 400],
                        regionData: {
                            regions: ['北京', '上海', '广东', '浙江', '江苏', '四川', '湖北', '山东', '河南', '福建'],
                            counts: [850, 720, 680, 520, 480, 350, 320, 300, 280, 250]
                        },
                        typeDistribution: {
                            types: ['移动IP', '固定IP', '代理IP'],
                            counts: [6500, 4500, 1500]
                        },
                        trendData: {
                            dates: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
                            totalIPs: [1200, 1320, 1010, 1340, 900, 2300, 2100],
                            uniqueIPs: [800, 850, 720, 900, 650, 1500, 1400]
                        }
                    };
                },

                // 查询数据
                searchData() {
                    this.loadData();
                },

                // 重置筛选条件
                resetFilter() {
                    this.filterParams = {
                        startDate: '',
                        endDate: '',
                        region: '',
                        ipType: ''
                    };
                    layui.use('form', () => {
                        layui.form.val('filterForm', this.filterParams);
                    });
                    this.loadData();
                }
            }
        });

        // 响应式处理
        window.addEventListener('resize', () => {
            const app = document.querySelector('#app').__vue__;
            if (app.ipMap) app.ipMap.resize();
            if (app.activityChart) app.activityChart.resize();
            if (app.regionChart) app.regionChart.resize();
            if (app.typeChart) app.typeChart.resize();
            if (app.trendChart) app.trendChart.resize();
        });
    </script>
</body>
</html>